<include file="Public/header"/>
<script type="text/javascript">
	$.config = {
		router: false,
	}
	
</script>
<script type="text/javascript" src="__PUBLIC__/app/lib/light7/js/light7.min.js"></script>

</head>

<body>
    <div class="page-group">
        <div class="page page-current">
       <header class="bar bar-nav">
    <a class="button button-link button-nav pull-left back" href="javascript:window.history.go(-1)">
      <span class="icon icon-left"></span>
    </a>
    <h1 class="title">在线报名</h1>
    <a class="button button-link button-nav pull-right" href="/">
                <span class="icon icon-home"></span>
            </a>
</header>
            <div class="content ">
                <form class="infomat" action="{:U('sign')}" method="post">
                	<div class="ds-title title-new">
                		在线报名
                	</div>
                	<div class="basic">
                		<p>姓名<i>*</i></p>
                		<div class="basic-posit">
	                		<input type="text" placeholder="请输入真实姓名" name="user_name" id="user_name" value="" />
	                		<i class="icon icon-me i-fr"></i>
                		</div>
                		<p>身份证号<i>*</i></p>
                		<div class="basic-posit">
	                		<input type="text" placeholder="请输入18位身份证号" name="id_card" id="id_card" value="" /><i class="icon icon-card i-fr"></i></div>
	                		<p>所选班级<i>*</i></p>
                		
                		<i class="icon icon-list i-before"></i>
                		<select name="class" id="class" style="width: 85.3%;margin-left: -.3rem;">
                            <volist name="data['class_data']" id="val">
                                  <option value="{$val['id']}" <if condition="$val['id'] eq $data['class_id']">selected="selected"</if>>{$val['name']}</option>
                            </volist>
                			<!-- <option value="钻石班">钻石班</option> -->
                		</select><br />
                        <span id='desc'>
                            <volist name="data['class_data']" id="val">
                               <if condition="$val['id'] eq $data['class_id']">{$val['notes']}</if>
                            </volist>
                        </span>
                        <!-- <span>{:$data['class_desc']}</span> -->
                		<!-- <span>包含：什么什么什么</span> -->
                		<p>费用<i>*</i></p>
                		<!-- <input type="text" value="{:$data['class_price']}" disabled="false" /><i class="icon icon-list i-fr"></i> -->
                        <div class="basic-posit">
                        <input type="text" id='price' name='money' value=" <volist name="data['class_data']" id="val">
                               <if condition="$val['id'] eq $data['class_id']">{$val['price']}</if>
                            </volist>" disabled="false" /><i class="icon icon-cart i-fr"></i></div>
                		<p>电话<i>*</i></p>
                		<div class="basic-posit"><input type="text" placeholder="请输入电话" value="" name="phone" id="phone" /><i class="icon icon-phone i-fr"></i></div>
                		<!-- <p>验证码<i>*</i></p>
                		<input type="text" class="verification-code" placeholder="请输入验证码"/><i id='code' class="icon icon-list i-last">获取</i>-->
                        <!-- <input type="hidden" name="user_id" value="{:$data['user_id']}" /> --> 
                	</div>
                	<div class="btns">
                		<button type='button' id="submit" class="btn submit">报名</button>
                		<button type="reset" class="btn reset">清空</button>
                	</div>
                </form>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript">
    $('#class').change(
        function(event) {
        var class_id = $('#class').val();
        $.ajax({
            url: '{:U('getClass')}',
            type: 'post',
            dataType: 'json',
            data: {'class_id': class_id},
            success : function(res){
                if(res.res == 1){
                    $('#desc').empty();
                    $('#desc').html(res.data.notes);
                    $('#price').empty();
                    $('#price').val(res.data.price);
                }
            }
        })
        
    });

    //验证信息
    $("#submit").click(function () {
                  var user_name = $.trim($("#user_name").val());
                  var id_card = $.trim($("#id_card").val());
                  var class_id = $.trim($("#class").val());
                  var phone = $.trim($("#phone").val());
                  var regPhone = /^1[35678]\d{9}$/;
                  var regIdCard = /^\d{18}$/;
                  if(user_name == ''){
                     layer.msg('请填写姓名!');
                     return false;
                  }
                
                if (id_card == '') {
                   layer.msg('请填写身份证号码!');
                    return false;
                }
                if (!regIdCard.test(id_card)) {
                    layer.msg('身份证号码格式不正确！!'); 
                    return false;
                }
                if (phone == '') {
                    layer.msg('请填写手机号码!'); 
                    return false;
                }
                if (!regPhone.test(phone)) {
                    layer.msg('手机号码格式不正确！'); 
                    return false;
                }
                if (class_id == 0) {
                    layer.msg('请选择班型!'); 
                    return false;
                }
            $.ajax({
                url: '{:U("sign")}',
                type: 'post',
                dataType: 'json',
                data: {'user_name': user_name,'id_card':id_card,'class':class_id,'phone':phone},
                success : function (res){
                    if(res.res==1){
                        //墨绿深蓝风
                        layer.alert('报名成功', {
                          skin: 'layui-layer-molv' //样式类名
                          ,closeBtn: 0
                        }, function(){
                            window.location.href='{:U("index/index")}';
                        });
                    }else if(res.res==0){
                        layer.alert('报名失败', {
                          skin: 'layui-layer-molv' //样式类名
                          ,closeBtn: 0
                        }, function(){
                            location.reload();
                        });
                    }
                }
            })
            
        });
</script>
</html>
